<!--
  Generated template for the IonicUiPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>ionicUI</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <!-- 页面改懒加载后引入的组件会报错,先注释掉 -->
  <ui></ui>
  <!-- 引入轮播图 -->
  <ion-slides pager loop="true" autoplay="1000">
  
    <ion-slide style="background-color: green">
      <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=257368172,395942419&fm=27&gp=0.jpg" alt="">
      <h2>Slide 1</h2>
    </ion-slide>
  
    <ion-slide style="background-color: blue">
      <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=775135951,1760290913&fm=27&gp=0.jpg" alt="">
      <h2>Slide 2</h2>
    </ion-slide>
  
    <ion-slide style="background-color: red">
      <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=407464649,2089074932&fm=27&gp=0.jpg" alt="">
      <h2>Slide 3</h2>
    </ion-slide>
  
    <ion-slide style="background-color: red">
      <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=344091145,309580146&fm=27&gp=0.jpg" alt="">
      <h2>Slide 3</h2>
    </ion-slide>
  
  </ion-slides>

  <!-- tab 栏 -->
  <div padding>
    <ion-segment [(ngModel)]="tab">
      <ion-segment-button value="tab1">
        TAB1
      </ion-segment-button>
      <ion-segment-button value="tab2">
        TAB2
      </ion-segment-button>
    </ion-segment>
  </div>
  
  <div [ngSwitch]="tab">
    <ion-list *ngSwitchCase="'tab1'">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3664575467,1476789896&fm=27&gp=0.jpg">
        </ion-thumbnail>
        <h2>Ruby</h2>
      </ion-item>
      ...
    </ion-list>
  
    <ion-list *ngSwitchCase="'tab2'">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=413479881,1224574787&fm=27&gp=0.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
      ...
    </ion-list>
  </div>

    <hr>
  <h3>页面跳转1</h3>
    <button ion-button block (click)="gotoTestpage1Page()">NavController</button>
    <button ion-button block [navPush]="testpage2">navPage</button>
  <h3>页面跳转2 --传参数</h3>
    <button ion-button block (click)="gotoTestpage3Page()">NavController 传参</button>
    <button ion-button block [navPush]="testpage4" [navParams]="{msg:this.msg}">navPage 传参</button>
  <h3>页面跳转3 --modalcontroller </h3>
    <button ion-button block (click)="gotomodalcontroller()">modalcontroller</button>

    <br>
    <hr>
    <div>
      引入进度条组件
      <progress-bar total="10" amount="7"></progress-bar>
      <progress-bar total="10" amount="5"></progress-bar>
      <progress-bar total="10" amount="3"></progress-bar>

    </div>

    <button ion-button (click)="gotoToupiao()">goto投票页面</button>
</ion-content>
